<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<div id="userinfo">
			<form action="">
				<table>
					<tr>
						<td>用户号：</td>
						<td><input name="userno" type="text" value="111"></td>

						<td>用户密码：</td>
						<td><input name="userpwd" type="password" value="xxx"></td>

						<td>职业：</td>
						<td>
							<select name="userprofession">
								<option>教师</option>
								<option>学生</option>
							</select>
						</td>

						<td>兴趣：</td>
						<td>
							<input name="userinterest" type="checkbox" value="足球" checked="checked">足球
							<input name="userinterest" type="checkbox" value="篮球">篮球
							<input name="userinterest" type="checkbox" value="篮球">篮球
							<input name="userinterest" type="checkbox" value="篮球">篮球
						</td>

					</tr>

					<!--第2行-->
					<tr>
						<td>用户号：</td>
						<td><input name="userno" type="text" value="111"></td>

						<td>用户密码：</td>
						<td><input name="userpwd" type="password" value="xxx"></td>

						<td>职业：</td>
						<td>
							<select name="userprofession">
								<option>教师</option>
								<option>学生</option>
							</select>
						</td>

						<td>兴趣：</td>
						<td>
							<input name="userinterest" type="checkbox" value="足球" checked="checked">足球
							<input name="userinterest" type="checkbox" value="篮球">篮球
							<input name="userinterest" type="checkbox" value="篮球">篮球
							<input name="userinterest" type="checkbox" value="篮球">篮球
						</td>
					</tr>
				</table>
			</form>
		</div>

		<input type="button" value="提交-简单测试" onclick="tqobject();">
		<input type="button" value="提交-简单测试2" onclick="tqobject2();">

		<hr>
		
		<div id="part2"></div>
		<input type="button" value="根据json数据产生视图" onclick="createview()">
		<input type="button" value="根据视图产生json数据" onclick="createjson();">
		<input type="button" value="测试js中的列表(即[]型数组)映射(即{}型对象)" onclick="test();">		
		<hr>

		<script type="text/javascript">
			function test(){				
				var key = 'abc';//key这里设置没有用
				var arry = {key : '值'};
				alert(JSON.stringify(arry));
				
				//3测试js中的列表(即[]型数组)映射(即{}型对象)
				var list = [{"key":"123"}];//在js中，数组是与json数组对应的
				alert("显示列表中的数据格式1:"+list[0].key);
				alert("显示列表中的数据格式2:"+list[0]['key']);

				//4成功，显示[{"a":"李一"},{"b":"李二"}]
				var list2=[];
				var jname=["a","b"];
				var jvalue=["李一","李二"]
				var listres=[];
				
				for(var i=0;i<jname.length;i++){
					var map={};
					map[jname[i]]=jvalue[i];//动态加健名 map[变量]=值					
					list2.push(map);//注意了，与java使用不太一样，java中map.push / list.add
				}
				alert("显示列表中的数据格式1:"+list2[0].a);
				alert("显示列表中的数据格式2:"+list2[0]['a']);
				alert(JSON.stringify(list2));
				//3结束				
			}
			function createjson(){
				var keys=["name","email"];				
				var ifo = [];
				var obj = document.getElementById("part2");
				//var informations1=obj.getChildNodes();
				var informations1 = obj.getElementsByTagName("input");

				//alert(informations1.length);//正确，共10个input元素
				//alert(informations1[0].value);//正确
				//alert(informations1[1].value);//正确

				for(var i = 0; i < informations1.length; i++) {
					var map={};
					for(var j=0;j<keys.length;j++){
						//info.push({keys[j]:informations1[i].value});//不合法
						//ifo.push({name:informations1[i].value});//这句是合法的，前面的name不能是变量，是健名，动态健名见下
						//先组织{}map数据，然后再向数组里推
						
						map[keys[j]]=informations1[i+j].value;//开始只写[i]是错的，因为被赋值元素要动，另外下面要写i=i+j-1;												
					}
					ifo.push(map);
					i=i+j-1;
				}
							
				alert(JSON.stringify(ifo));
				ifo[0]["other"]="aaa";//动态设置数据，里面要是变量要赋值，否则会是空，直接写字符串要加""
				alert(JSON.stringify(ifo));
				//alert(ifo.toString());//此句无法显示内容，只能显示[object Object],[object Object]				
			}
			
			function createview() {
				//1先假定传来的json数据如下，这里是模拟产生				
				var users = new Array();
				for(var i = 0; i < 5; i++) {
					users.push({ name: "name" + i, email: "email" + i })
				}
				//alert("users array is:" + users);
				jsonstring = JSON.stringify(users);
				//alert("jsonstr is:" + jsonstring);
				jsonobj=JSON.parse(jsonstring);
				//alert("jsonobj is"+jsonobj);//从显示的效果看，似乎与users数组是一样的
				
				//alert("每个人有几个属性:"+users[0].length);//不正确，因为users[0]不是数组
				//alert("每个人有几个属性:"+jsonobj[0].length);//不正确，因为jsonobj[0]不是数组，如果真想得到长度，可以做一个循环，格式如
				var temp="<form><table>";
				for(var i=0;i<jsonobj.length;i++){
					temp=temp+"<tr>";
					for(var key in jsonobj[i]){//注意，开始写错了，写成var key:jsonobj[i]这是java格式
						temp=temp+"<td><input type='text' value='"+jsonobj[i][key]+"'></td>"
					}
					temp=temp+"</tr>";
				}
				temp=temp+"</table></form>";
				//alert(temp);

				var part2=document.getElementById("part2");
				part2.innerHTML=temp;
			}

			function tqobject2() { //简单测试2 要求传的数据格式是：111-xxx-教师-足球|篮球,
				var ifo1 = [];
				var ifo2 = [];
				var ifo3 = [];
				var ifo4 = [];
				var obj = document.getElementById("userinfo");
				//var informations1=obj.getChildNodes();
				var informations1 = obj.getElementsByTagName("*");

				//		alert(informations1.length);//正确
				//		alert(informations1[0].value);//正确
				//		alert(informations1[1].value);//正确

				for(var i = 0; i < informations1.length; i++) {
					//if(informations1[i].getAttribute("type")=="text") //正确，通过类型找到元素，可以用
					//if(informations1[i].className=="xxx") //正确，可以用，但适合于所有元素都是input，一次性成功，这里有多种类型并不适用
					if(informations1[i].getAttribute("name") == "userno")
						ifo1.push(informations1[i].value);

					if(informations1[i].getAttribute("name") == "userpwd")
						ifo2.push(informations1[i].value);

					if(informations1[i].getAttribute("name") == "userprofession")
						ifo3.push(informations1[i].value);

					if(informations1[i].getAttribute("name") == "userinterest") {
						//alert("i:"+i)
						//alert("interest");
						var j = i;
						var temp = "";
						while(j < informations1.length && informations1[j].getAttribute("name") == "userinterest") {
							if(informations1[j].checked) {
								temp = temp + informations1[j].value + "|";
								//alert("j:"+j+"temp:"+temp)
							}
							j++;
						}
						i = j - 1; //j落在userinterest后面的元素上，因for中i要加1，故这里-1
						//alert("new i:"+i);
						ifo4.push(temp);
					}
				}

				var senddata = "";
				for(var i = 0; i < ifo1.length; i++) {
					senddata = senddata + ifo1[i] + '-' + ifo2[i] + '-' + ifo3[i] + '-' + ifo4[i] + "," + "\n"; //以-分开不同的更新数据，如：21,100-		
				}
				alert(senddata);
			}

			function tqobject() { //简单测试,html只有一行数据
				var ifo = [];
				var obj = document.getElementById("userinfo");
				//var informations1=obj.getChildNodes();
				var informations1 = obj.getElementsByTagName("input");

				//		alert(informations1.length);//正确
				//		alert(informations1[0].value);//正确
				//		alert(informations1[1].value);//正确

				for(var i = 0; i < informations1.length; i++) {
					ifo.push(informations1[i].value);
				}
				alert(ifo);
			}
		</script>

	</body>
</html>